<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="updateState === 'add' ? '标题-链接（用换行分割链接和标题）' : '标题-链接(单行)'" :prop="updateState === 'add' ? 'goodsTitleOrLinkArr': 'goodsTitleOrLink'">
            <el-input v-if="updateState === 'add'" v-model="model.goodsTitleOrLinkArr" type="textarea" rows="10" :disabled="disableSubmit" placeholder="请输入" />
            <el-input v-else-if="updateState === 'edit'" v-model="model.goodsTitleOrLink" type="textarea" rows="3" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="!actionType8" :span="12">
          <el-form-item label="标题查找超时（分钟）:" prop="btczcs">
            <el-input-number v-model="model.btczcs" :disabled="disableSubmit" controls-position="right" :min="3" :max="1000000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="连续发布（天）:" prop="continuousIssue">
            <el-input-number v-model="model.continuousIssue" :disabled="disableSubmit" controls-position="right" :min="1" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!actionType8">
        <el-col :span="12">
          <el-form-item label="店铺:" prop="sName">
            <selectStoreList v-model.trim="model.sName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="操作类型:" prop="actionType">
            <el-select v-model="model.actionType" filterable clearable placeholder="请选择">
              <el-option v-for="item in actionTypeList" :key="item.code" :value="item.code" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="!actionType8" :span="12">
          <el-form-item label="下单数:" prop="orderNum">
            <el-input-number v-model="model.orderNum" :disabled="disableSubmit" controls-position="right" :min="1" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!actionType8">
        <el-col :span="12">
          <el-form-item label="商品链接数1带:" prop="spljsyidai">
            <el-input-number v-model="model.spljsyidai" :disabled="disableSubmit" controls-position="right" :min="0" :max="1000000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款方式:" prop="payMethod">
            <el-select v-model="model.payMethod" filterable clearable placeholder="请选择">
              <el-option v-for="item in payMethodList" :key="item.code" :value="item.code" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="代付账号:" prop="replacePayAccount">
            <el-input v-model="model.replacePayAccount" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col v-if="!actionType8" :span="12">
          <el-form-item label="支付密码（可不填）:" prop="payPwd">
            <el-input v-model="model.payPwd" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker v-model="model.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :disabled="disableSubmit" placeholder="选择日期时间" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="间隔时间(分钟):" prop="intervalTime">
            <el-input-number v-model="model.intervalTime" :disabled="disableSubmit" controls-position="right" :min="0" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="自动收货:" prop="vTakeDelivery">
            <el-select v-model="model.vTakeDelivery" filterable clearable placeholder="请选择">
              <el-option v-for="item in vTakeDeliveryList" :key="item.code" :value="item.code" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动收货间隔时间(分钟):" prop="vTakeDeliveryIntervalTime">
            <el-input-number v-model="model.vTakeDeliveryIntervalTime" :disabled="disableSubmit" controls-position="right" :min="0" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="!actionType8" :span="24">
          <el-form-item label="下单前清空购物车:" prop="xdqqkgwc">
            <el-radio-group v-model="model.xdqqkgwc">
              <el-radio label="清空">清空</el-radio>
              <el-radio label="不清空">不清空</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="!actionType8" :span="12">
          <el-form-item label="是否浏览:" prop="isBrowse">
            <el-radio-group v-model="model.isBrowse">
              <el-radio label="浏览">浏览</el-radio>
              <el-radio label="不浏览">不浏览</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="model.isBrowse === '浏览' && !actionType8" :span="12">
          <el-form-item label="浏览时间(秒):">
            <el-input v-model="model.browsingTime" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抢单设备:" prop="grabOrderDeviceArr">
            <el-button type="success" size="small" @click="deviceCheckAll">全选</el-button>
            <el-button type="info" size="small" @click="deviceCheckOutAll">全不选</el-button>
            <el-checkbox-group v-model="model.grabOrderDeviceArr" size="small">
              <el-checkbox-button v-for="item in deviceList" :key="item.id" :label="item.code">{{ item.code }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="默认好评（如果不评价和默认五星好评，则下方评价语无效）:" prop="defaultPraise">
            <el-select v-model="model.defaultPraise" filterable clearable placeholder="请选择">
              <el-option v-for="item in defaultPraiseList" :key="item.code" :value="item.code" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="model.defaultPraise === '2'" :span="24">
          <el-form-item label="确认收货后（通用）评价:" prop="qrshhtypjArr">
            <el-button type="success" size="small" @click="qrshhtypjAll">全选</el-button>
            <el-button type="info" size="small" @click="qrshhtypjCheckOutAll">全不选</el-button>
            <el-checkbox-group v-model="model.qrshhtypjArr" size="small">
              <el-checkbox-button v-for="item in evaluateClassList" :key="item.classs" :label="item.classs">{{ item.classs }}</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="APP:" prop="app">
            <el-select v-model="model.app" filterable clearable placeholder="请选择">
              <el-option value="淘宝" label="淘宝" />
              <el-option value="淘特" label="淘特" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="!actionType8" :span="12">
          <el-form-item label="刷几遍:" prop="brushSeveralTimes">
            <el-input-number v-model="model.brushSeveralTimes" :disabled="disableSubmit" controls-position="right" :min="0" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!disableSubmit" class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { postAction } from '@/api/manage'
import { actionTypeList, payMethodList, vTakeDeliveryList, defaultPraiseList } from '@/utils/publicData'
import selectStoreList from '@/components/xm/selectStoreList/selectStoreList'

export default {
  components: {
    selectStoreList
  },
  props: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      visible: false,
      actionTypeList: actionTypeList,
      payMethodList: payMethodList,
      vTakeDeliveryList: vTakeDeliveryList,
      defaultPraiseList: defaultPraiseList,
      disableSubmit: false,
      userInfo: this.$ls.get('USER_INFO') || {},
      updateState: '',
      title: '',
      size: '50%',
      deviceList: [],
      evaluateClassList: [],
      rules: {
        goodsTitleOrLink: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        goodsTitleOrLinkArr: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        btczcs: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        continuousIssue: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        sName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        isBrowse: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        actionType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        payMethod: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        vTakeDelivery: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        xdqqkgwc: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        grabOrderDeviceArr: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      url: {
        update: 'taskList.aspx?action=Insert'
      }
    }
  },
  computed: {
    // 操作类型 === '8'
    actionType8() {
      return this.model.actionType === '8'
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getDeviceList()
    this.getEvaluateClassList()
  },
  methods: {
    // 全选
    deviceCheckAll() {
      this.model.grabOrderDeviceArr = this.deviceList.map(v => v.code)
    },
    // 全不选
    deviceCheckOutAll() {
      this.model.grabOrderDeviceArr = []
    },
    add() {
      this.updateState = 'add'
      this.visible = true
      this.model = {
        btczcs: 5,
        continuousIssue: 1,
        isBrowse: '浏览',
        actionType: '1',
        orderNum: '',
        spljsyidai: 1,
        payMethod: '1',
        intervalTime: 0,
        vTakeDelivery: '3',
        vTakeDeliveryIntervalTime: 0,
        xdqqkgwc: '清空',
        defaultPraise: '1',
        brushSeveralTimes: 1,
        app: '淘宝',
        browsingTime: '30',
        grabOrderDeviceArr: [],
        qrshhtypjArr: [],
        startTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
      }
      const taskAddData = this.$ls.get('taskAddData')
      this.model = { ...this.model, ...taskAddData }
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
    },
    edit(rowData) {
      console.log('行数据', rowData)
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.model = {
        grabOrderDeviceArr: [],
        qrshhtypjArr: []
      }
      // console.log('rowData.grabOrderDevice', rowData.grabOrderDevice)
      this.model = JSON.parse(JSON.stringify(rowData))
      if (rowData.grabOrderDevice) {
        this.$set(this.model, 'grabOrderDeviceArr', rowData.grabOrderDevice.split(','))
      } else {
        this.$set(this.model, 'grabOrderDeviceArr', [])
      }
      if (rowData.qrshhpj) {
        this.$set(this.model, 'qrshhtypjArr', rowData.qrshhpj.split(','))
      } else {
        this.$set(this.model, 'qrshhtypjArr', [])
      }
      if (this.model.isBrowse !== '不浏览') {
        this.$set(this.model, 'browsingTime', this.model.isBrowse)
        this.$set(this.model, 'isBrowse', '浏览')
      }
      console.log('this.model', this.model)
      // this.model.grabOrderDevice = rowData.grabOrderDevice.split(',')
    },
    // 获取设备
    getDeviceList() {
      this.$store.dispatch('app/setLoading', true)
      postAction('deviceList.aspx?action=GetList', { pageSize: 100 }).then((res) => {
        if (res.code === 1) {
          this.deviceList = res.data.list || []
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 全选
    qrshhtypjAll() {
      this.model.qrshhtypjArr = this.evaluateClassList.map(v => v.classs)
    },
    // 全不选
    qrshhtypjCheckOutAll() {
      this.model.qrshhtypjArr = []
    },
    // 获取评价分类
    getEvaluateClassList() {
      this.$store.dispatch('app/setLoading', true)
      postAction('evaluateList.aspx?action=GetClassList', {}).then((res) => {
        if (res.code === 1) {
          this.evaluateClassList = res.data || []
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    submitForm() {
      if (this.updateState === 'add') {
        const taskAddData = {
          orderNum: this.model.orderNum,
          spljsyidai: this.model.spljsyidai,
          replacePayAccount: this.model.replacePayAccount,
          vTakeDelivery: this.model.vTakeDelivery,
          vTakeDeliveryIntervalTime: this.model.vTakeDeliveryIntervalTime,
          xdqqkgwc: this.model.xdqqkgwc,
          isBrowse: this.model.isBrowse,
          browsingTime: this.model.browsingTime,
          btczcs: this.model.btczcs
        }
        this.$ls.set('taskAddData', taskAddData)
      }
      console.log('this.model', this.model)
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('app/setLoading', true)
          if (this.updateState === 'edit') {
            this.url.update = 'taskList.aspx?action=Update'
          } else {
            this.url.update = 'taskList.aspx?action=Insert'
          }
          postAction(this.url.update, this.model).then((res) => {
            if (res.code === 1) {
              this.modelClose()
              this.$message.success(res.message || '操作成功！')
              this.$emit('ok')
            } else {
              this.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 20px 30px 0;
  margin-bottom: 90px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
  .el-input-number{
    width: 100%;
  }
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
}
.el-col{
  padding: 0 8px;
}
.drawer-footer{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:65px;
  background:#fff;
  z-index:999;
  padding: 16px 29px;
  box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}
::v-deep .el-drawer__body {
    overflow: auto;
}
::v-deep .el-checkbox-button{
  margin-right: 10px;
}
::v-deep .el-checkbox-button--small .el-checkbox-button__inner{
  border-left: 1px solid #dcdfe6;
}
</style>
